<template>
  <form class="CreateOrder">
    <headTop/>
    <div class="product">
      <div class="kind">
        <div>产品图片</div>
        <div>描述</div>
        <div>单价（元）</div>
        <div>数量</div>
        <div>单位</div>
        <div>小计（元）</div>
      </div>
      <div class="productInfo" v-for="(item,index) in productData" :key="index" >
        <div class="productPhoto"><img :src="myImage(item.imageUrl)" alt="无法加载"></div>
        <div class="describe">
          <p>描述：</p>
          <p>{{item.productName}}</p>
          <p>{{item.productDescribe}}</p>
        </div>
        <div><p>{{item.productPrice}}</p></div>
        <div  class="number" @click="getSummaries">
          <template>
            <el-input-number v-model="item.productNum" :step="1" size="small" :min="1" :max="item.productRepertory"></el-input-number>
          </template>
        </div>
        <div>{{item.height}}/套</div>
        <div>{{item.payMoney}}</div>
      </div>
      <div><span  class="totalPrice">合计：{{totalPay}}</span><span class="balance">账户余额：{{bankBalance}}</span></div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <p>赠品信息</p>
      <div v-if="discounts.data === null">
        <p>{{discounts.msg}}</p>
      </div>
      <div v-else class="discounts"  >
        <div class="discountsProduct" v-for="(item,index) in discounts.data" :key="index" >
          <div><img :src="myImage(item.imageUrl)" alt="无法加载"></div>
          <div class="describe">
            <p>描述：</p>
            <p>{{item.productName}}</p>
            <p>{{item.productDescribe}}</p>
          </div>
          <div>
            <p>单价：</p>
            <p>{{item.productPrice}}</p>
          </div>
          <div>数量：1</div>
          <div>
            <p>规格：</p>
            <p>{{item.height}}/套</p>
          </div>
          <div>{{item.payMoney}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false" >取 消</el-button>
      </span>
    </el-dialog>
    <div class="product">
      <div class="kind">选择卸货点</div>
      <div v-for="(item,index) in address"  :key="index" class="address">
        <el-radio v-model="radio" :label="index" class="radio">
          <p>姓名：{{item.personName}}</p>
          <p>电话：{{item.personPhone}}</p>
          <p>地址：{{item.provinceName}}{{item.cityName}}{{item.countyName}}</p>
          <p>详细地址：{{item.addressInfo}}</p>
        </el-radio>
      </div>
      <div class="submit">
        <el-button type="text">
          <el-button type="primary" @click="discount">生成订单</el-button>
        </el-button>
      </div>
    </div>
  </form>
</template>
<script>
// @ is an alias to /src
import headTop from '@/components/headTop.vue'

export default {
  name: 'CreateOrder',
  components: {
    headTop
  },
  data () {
    return {
      dealerId: '',
      discounts: [],
      radio: 0,
      bankBalance: 0,
      totalPay: 0,
      checked: [],
      dialogVisible: false,
      productData: [],
      address: []
    }
  },
  created: function () {
    this.dealerId = this.$store.getters.getCompany.dealerId
    this.bankBalance = this.$store.getters.getCompany.bankBalance
    this.getData()
  },
  methods: {
    handleClose (done) { //  模态框
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    submit () { //  订单生成路由
      if (this.totalPay < this.bankBalance) {
        console.log('订单生成路由')
        this.$router.push({
          path: '/submitOrder',
          query: {
            discounts: this.discounts.data,
            dealerId: this.dealerId,
            totalPay: this.totalPay,
            bankBalance: this.bankBalance,
            address: this.address[this.radio],
            productData: this.productData
          }
        })
      } else {
        this.open('余额不足', 'warning')
      }
    },
    discount () { //  获取优惠信息
      for (let i = 0; i < this.productData.length; i++) {
        this.productData[i].productNumberReached = this.productData[i].productNum
      }
      this.dialogVisible = true
      this.$axios.post('matchFullGift', this.productData)
        .then((response) => {
          if (response) {
            this.discounts = response.data
            console.log('优惠')
            console.log(this.discounts)
            this.dialogVisible = true
          } else {
            this.open('失败', 'warning')
          }
        })
        .catch(function (error) {
          this.open('失败', 'warning')
          console.log(error)
        })
    },
    getSummaries () { //  获取总价格
      this.totalPay = 0
      for (let i = 0; i < this.productData.length; i++) {
        this.productData[i].payMoney = this.productData[i].productNum * this.productData[i].productPrice
        this.totalPay += this.productData[i].payMoney
        var tempObj = this.productData[i]
        this.$set(this.productData, i, tempObj)
      }
    },
    getData: function () { //  上个路由获取商品信息
      this.productData = this.$route.query.item
      for (let i = 0; i < this.productData.length; i++) {
        if (this.productData[i].productNum === undefined) {
          this.productData[i].productNum = 1
        }
        if (this.productData[i].payMoney === undefined) {
          this.productData[i].payMoney = this.productData[i].productNum * this.productData[i].productPrice
        }
        this.totalPay += this.productData[i].payMoney
      }
      console.log('生成订单')
      console.log(this.productData)
      this.$axios.post('address/queryAddress', { dealerId: this.dealerId, page: 1, limit: 5 }) //  用户地址请求
        .then((response) => {
          if (response.data.code === 200) {
            this.address = response.data.data
          }
          console.log('地址')
          console.log(this.address)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>
<style lang="less">
@import '../../assets/style/mixin';
.discountsProduct>image{
  width: 30%;
}
.discountsProduct>div{
  width: 40%;
}
.discountsProduct{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  vertical-align: middle;
}
.radio {
  padding: 20px 0;
  text-align: left !important;
}
.discounts{
  border-bottom: 1px gray solid;
  margin-bottom: 30px;
}
.radio{
  padding: 10px 0;
  width: 100%;
  height: 100px;
  text-align: center;
}
.address{
  padding: 0 20px;
  margin: 10px 10px;
  width: 20%;
  display: inline-block;
  background: white;
  border: 1px lightgray solid;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px;
}
.submit{
  float: right;
  margin: 70px 10px 0;
}
.balance{
  float: right;
}
.num{
  width: 50px;
}
*{
  font-size: 14px;
}
.headTitle{
  font-size: 18px;
}
.number{
  transform: scale(0.7);
  font-size: 28px;
}
.productPhoto{
  width: 100%;
  height: 100px;
}
.productPhoto img{
  height: 100%;
}
.kind{
  margin:  0 0 20px;
  padding: 0 0 20px;
}
.productInfo{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background: white;
  border: 5px white solid;
  margin: 10px 0;
  padding: 10px 0;
}
.kind,.productInfo{
  /*overflow: hidden;*/
  margin: 10px 0;
}
.kind>div,.productInfo>div{
  display: inline-block;
  width: 12%;
  /*float: left;*/
  text-align: center;
  vertical-align: middle;
}
.kind>div:nth-of-type(n+2){
  border-left: 1px lightgray solid;
}
.kind>div:nth-of-type(4),.productInfo>div:nth-of-type(4){
  width: 10%;
}
.kind>div:nth-of-type(2),.productInfo>div:nth-of-type(2){
  width: 20%;
}
.kind>div:nth-of-type(1),.productInfo>div:nth-of-type(1){
  width: 20%;
}
.product{
  padding: 10px 0;
}
</style>
